<template>
  <div class="simple-cesium-demo">
    <div ref="mapContainer" class="map-container"></div>
    
    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="toolbar-section">
        <h4>基础功能</h4>
        <button @click="addMarker">添加标记</button>
        <button @click="addPolyline">添加线条</button>
        <button @click="addPolygon">添加多边形</button>
        <button @click="addCircle">添加圆形</button>
        <button @click="clearAll">清除所有</button>
      </div>
      
      <div class="toolbar-section">
        <h4>动画效果</h4>
        <button @click="addBlinkingPoint">闪烁点</button>
        <button @click="addTrajectory">轨迹动画</button>
        <button @click="stopAnimation">停止动画</button>
      </div>
      
      <div class="toolbar-section">
        <h4>测量工具</h4>
        <button @click="startMeasureDistance">测量距离</button>
        <button @click="startMeasureArea">测量面积</button>
        <button @click="clearMeasure">清除测量</button>
      </div>
    </div>
    
    <!-- 信息面板 -->
    <div class="info-panel">
      <div v-if="measureResult" class="measure-result">
        <h4>测量结果</h4>
        <p>{{ measureResult }}</p>
      </div>
      
      <div class="status-info">
        <p>实体数量: {{ entityCount }}</p>
        <p>动画状态: {{ isAnimating ? '播放中' : '已停止' }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as Cesium from 'cesium';
import CesiumMap from '../utils/CesiumMap';

// 地图容器引用
const mapContainer = ref(null);
let cesiumMap = null;

// 状态变量
const entityCount = ref(0);
const isAnimating = ref(false);
const measureResult = ref('');

// 实体引用
let entities = [];
let trajectoryEntity = null;
let blinkingEntity = null;
let measureEntities = [];

// 测量相关
let measureType = '';
let measurePositions = [];

onMounted(() => {
  // 初始化地图
  cesiumMap = new CesiumMap(mapContainer.value, {
    animation: true,
    timeline: true,
    baseLayerPicker: true,
    geocoder: true,
    homeButton: true,
    sceneModePicker: true,
    navigationHelpButton: true,
    infoBox: true
  });
  
  // 设置初始视角
  cesiumMap.viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9087, 1000),
    orientation: {
      heading: 0.0,
      pitch: -Math.PI / 2,
      roll: 0.0
    }
  });
  
  // 监听实体变化
  cesiumMap.viewer.entities.collectionChanged.addEventListener(() => {
    entityCount.value = cesiumMap.viewer.entities.values.length;
  });
});

onBeforeUnmount(() => {
  cesiumMap && cesiumMap.destroy();
});

/**
 * 添加标记
 */
function addMarker() {
  const entity = cesiumMap.addMarker({
    lon: 116.3974 + Math.random() * 0.01,
    lat: 39.9087 + Math.random() * 0.01,
    image: 'https://cdn.jsdelivr.net/gh/openlayers/ol3@master/examples/data/icon.png',
    width: 32,
    heightPx: 32,
    name: `标记点${entities.length + 1}`,
    description: '这是一个标记点'
  });
  entities.push(entity);
}

/**
 * 添加线条
 */
function addPolyline() {
  const positions = [
    [116.3974, 39.9087],
    [116.3974 + 0.01, 39.9087 + 0.01],
    [116.3974 + 0.02, 39.9087]
  ];
  
  const entity = cesiumMap.addPolyline({
    positions,
    color: CesiumMap.Color.BLUE,
    width: 3,
    name: `线条${entities.length + 1}`,
    description: '这是一条线条'
  });
  entities.push(entity);
}

/**
 * 添加多边形
 */
function addPolygon() {
  const positions = [
    [116.3974, 39.9087],
    [116.3974 + 0.01, 39.9087],
    [116.3974 + 0.01, 39.9087 + 0.01],
    [116.3974, 39.9087 + 0.01]
  ];
  
  const entity = cesiumMap.addPolygon({
    positions,
    color: CesiumMap.Color.GREEN.withAlpha(0.5),
    name: `多边形${entities.length + 1}`,
    description: '这是一个多边形'
  });
  entities.push(entity);
}

/**
 * 添加圆形
 */
function addCircle() {
  const entity = cesiumMap.addCircle({
    lon: 116.3974 + Math.random() * 0.01,
    lat: 39.9087 + Math.random() * 0.01,
    radius: 500,
    color: CesiumMap.Color.RED.withAlpha(0.5),
    name: `圆形${entities.length + 1}`,
    description: '这是一个圆形'
  });
  entities.push(entity);
}

/**
 * 添加闪烁点
 */
function addBlinkingPoint() {
  if (blinkingEntity) return;
  
  blinkingEntity = cesiumMap.addEntity({
    position: CesiumMap.Cartesian3.fromDegrees(116.3974, 39.9087, 100),
    point: {
      pixelSize: 20,
      color: CesiumMap.Color.RED
    }
  });
  
  cesiumMap.addBlinkingEffect(blinkingEntity, {
    duration: 1000,
    color1: CesiumMap.Color.RED,
    color2: CesiumMap.Color.TRANSPARENT
  });
  
  entities.push(blinkingEntity);
}

/**
 * 添加轨迹动画
 */
function addTrajectory() {
  if (trajectoryEntity) return;
  
  const positions = [
    { lon: 116.3974, lat: 39.9087, height: 100 },
    { lon: 116.3913, lat: 39.9075, height: 150 },
    { lon: 116.4053, lat: 39.9200, height: 200 }
  ];
  
  trajectoryEntity = cesiumMap.addTrajectoryAnimation(positions, {
    timeStep: 20,
    pixelSize: 15,
    color: CesiumMap.Color.YELLOW
  });
  
  isAnimating.value = true;
  entities.push(trajectoryEntity);
}

/**
 * 停止动画
 */
function stopAnimation() {
  if (trajectoryEntity) {
    cesiumMap.removeEntity(trajectoryEntity);
    trajectoryEntity = null;
  }
  
  if (blinkingEntity) {
    cesiumMap.removeBlinkingEffect(blinkingEntity);
    cesiumMap.removeEntity(blinkingEntity);
    blinkingEntity = null;
  }
  
  isAnimating.value = false;
  cesiumMap.viewer.clock.shouldAnimate = false;
}

/**
 * 开始测量距离
 */
function startMeasureDistance() {
  measureType = 'distance';
  measurePositions = [];
  clearMeasureEntities();
  
  cesiumMap.addScreenSpaceEventHandler(CesiumMap.ScreenSpaceEventType.LEFT_CLICK, onMeasureClick);
}

/**
 * 开始测量面积
 */
function startMeasureArea() {
  measureType = 'area';
  measurePositions = [];
  clearMeasureEntities();
  
  cesiumMap.addScreenSpaceEventHandler(CesiumMap.ScreenSpaceEventType.LEFT_CLICK, onMeasureClick);
}

/**
 * 测量点击事件
 */
function onMeasureClick(event) {
  const pickedPosition = cesiumMap.viewer.camera.pickEllipsoid(event.position);
  if (!pickedPosition) return;
  
  const cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
  const lon = Cesium.Math.toDegrees(cartographic.longitude);
  const lat = Cesium.Math.toDegrees(cartographic.latitude);
  
  measurePositions.push([lon, lat]);
  
  // 添加测量点
  const measurePoint = cesiumMap.addEntity({
    position: CesiumMap.Cartesian3.fromDegrees(lon, lat),
    point: {
      pixelSize: 8,
      color: CesiumMap.Color.YELLOW
    }
  });
  measureEntities.push(measurePoint);
  
  // 计算测量结果
  if (measureType === 'distance' && measurePositions.length === 2) {
    const distance = CesiumMap.calcDistance(measurePositions[0], measurePositions[1]);
    measureResult.value = `距离: ${(distance / 1000).toFixed(2)} 公里`;
    cesiumMap.removeScreenSpaceEventHandler(CesiumMap.ScreenSpaceEventType.LEFT_CLICK);
  } else if (measureType === 'area' && measurePositions.length >= 3) {
    const area = CesiumMap.calcPolygonArea(measurePositions);
    measureResult.value = `面积: ${(area / 1000000).toFixed(2)} 平方公里`;
    cesiumMap.removeScreenSpaceEventHandler(CesiumMap.ScreenSpaceEventType.LEFT_CLICK);
  }
}

/**
 * 清除测量
 */
function clearMeasure() {
  clearMeasureEntities();
  measureResult.value = '';
  measurePositions = [];
  cesiumMap.removeScreenSpaceEventHandler(CesiumMap.ScreenSpaceEventType.LEFT_CLICK);
}

/**
 * 清除测量实体
 */
function clearMeasureEntities() {
  measureEntities.forEach(entity => {
    cesiumMap.removeEntity(entity);
  });
  measureEntities = [];
}

/**
 * 清除所有
 */
function clearAll() {
  // 清除所有实体
  entities.forEach(entity => {
    cesiumMap.removeEntity(entity);
  });
  entities = [];
  
  // 停止动画
  stopAnimation();
  
  // 清除测量
  clearMeasure();
  
  // 重置状态
  entityCount.value = 0;
  isAnimating.value = false;
  measureResult.value = '';
  
  console.log('所有内容已清除');
}
</script>

<style scoped>
.simple-cesium-demo {
  position: relative;
  width: 100%;
  height: 100vh;
}

.map-container {
  width: 100%;
  height: 100%;
}

.toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 15px;
  border-radius: 8px;
  max-width: 250px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
}

.toolbar-section {
  margin-bottom: 15px;
}

.toolbar-section h4 {
  margin: 0 0 8px 0;
  color: #4CAF50;
  font-size: 14px;
}

.toolbar button {
  display: block;
  width: 100%;
  margin: 5px 0;
  padding: 8px 12px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.toolbar button:hover {
  background: #1976D2;
}

.info-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 15px;
  border-radius: 8px;
  max-width: 200px;
  z-index: 1000;
}

.measure-result {
  margin-bottom: 15px;
}

.measure-result h4 {
  margin: 0 0 8px 0;
  color: #FF9800;
}

.status-info p {
  margin: 5px 0;
  font-size: 12px;
}
</style> 